<template>
  <div class="enter">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <van-tabbar v-model="active" v-if="$route.meta.showBottomBar">
      <van-tabbar-item v-for="tab in tabs" :key="tab.label" :to="tab.path">
        <span v-text="tab.label"></span>
        <img slot="icon" slot-scope="props" :src="props.active ? tab.select : tab.normal" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, NavBar } from "vant";
Vue.use(Tabbar)
  .use(TabbarItem)
  .use(NavBar);
export default {
  data() {
    return {
      active: 0,
      tabs: [
        {
          label: "首页",
          normal: "/img/7.png",
          select: "/img/8.png",
          path: "/m/enter/home"
        },
        {
          label: "分类",
          normal: "/img/5.png",
          select: "/img/6.png",
          path: "/m/enter/cate"
        },
        {
          label: "购物车",
          normal: "/img/3.png",
          select: "/img/4.png",
          path: "/m/enter/cart"
        },
        {
          label: "我的",
          normal: "/img/1.png",
          select: "/img/2.png",
          path: "/m/enter/my"
        }
      ]
    };
  },
  created: function() {
    this.current();
  },
  methods: {
    current() {
      switch (this.$route.name) {
        case "home":
          this.active = 0;
          break;
        case "cate":
          this.active = 1;
          break;
        case "cart":
          this.active = 2;
          break;
        case "my":
          this.active = 3;
          break;
        default:
          break;
      }
    }
  },

  watch: {
    $route: function() {
      this.current();
    }
  }
};
</script>

<style scoped>
.enter {
  height: 100vh;
  width: 100%;
}
.van-tabbar-item--active {
  color: #1296db;
  background-color: #fafafa;
}
</style>
